<script setup>
const kjlist1 = [
  {id:1,name:'家庭保洁',img:"./img/indeximg/kjfs/社区新闻2图片.jpg"},
  {id:2,name:'家庭保洁',img:"./img/indeximg/kjfs/缴费.png"},
  {id:3,name:'家庭保洁',img:"./img/indeximg/kjfs/缴费.png"},
  {id:4,name:'家庭保洁',img:"./img/indeximg/kjfs/缴费.png"},
]
const kjlist2 = [
  {id:1,name:'家庭保洁',img:"./img/indeximg/kjfs/社区新闻2图片.jpg"},
  {id:2,name:'家庭保洁',img:"./img/indeximg/kjfs/缴费.png"},
  {id:3,name:'家庭保洁',img:"./img/indeximg/kjfs/缴费.png"},
  {id:4,name:'家庭保洁',img:"./img/indeximg/kjfs/缴费.png"},
]
const kjlist3 = [
  {id:1,name:'家庭保洁',img:"./img/indeximg/kjfs/社区新闻2图片.jpg"},
  {id:2,name:'家庭保洁',img:"./img/indeximg/kjfs/社区新闻2图片.jpg"},
]
const kjlist4 = [
  {id:1,name:'家庭保洁',img:"./img/indeximg/kjfs/社区新闻2图片.jpg"},
  {id:2,name:'家庭保洁',img:"./img/indeximg/kjfs/缴费.png"},
  {id:3,name:'家庭保洁',img:"./img/indeximg/kjfs/缴费.png"},
  {id:4,name:'家庭保洁',img:"./img/indeximg/kjfs/缴费.png"},
  {id:5,name:'家庭保洁',img:"./img/indeximg/kjfs/社区新闻2图片.jpg"},
  {id:6,name:'家庭保洁',img:"./img/indeximg/kjfs/缴费.png"},
  {id:7,name:'家庭保洁',img:"./img/indeximg/kjfs/缴费.png"},
  {id:8,name:'家庭保洁',img:"./img/indeximg/kjfs/缴费.png"},
]
</script>

<template>
  <view class="titli">
    <v-icon class="icon" icon="mdi-chevron-left"></v-icon>
    <h3>家政服务</h3>
  </view>
<!-- 快捷方式  -->
  <view class="kj1">
    <ul class="w">
      <li v-for="(item,index) in kjlist1" :key="index">
        <a>
          <text>{{ item.name }}</text>
          <img :src="item.img" alt="">
        </a>
      </li>
    </ul>
  </view>
<!-- 快捷方式2 -->
  <view class="kj2">
    <ul class="w">

      <li v-for="(item,index) in kjlist2" :key="index">
        <a>
          <img :src="item.img" alt="">
          <text>{{ item.name }}</text>
        </a>
      </li>
    </ul>
  </view>
  <!-- 快捷方式3 -->
  <view class="kj3">
    <ul class="w">
      <li v-for="item in kjlist3">
        <a>
          <view>
            <h4>单次保洁</h4>
            <v-icon icon="mdi-chevron-right"></v-icon>
          </view>
          <text>会员校友会</text>
        </a>
      </li>
    </ul>
  </view>
  <!-- 快捷方式4 -->
  <view class="kj4">
    <ul class="w">
      <li v-for="(item,index) in kjlist4" :key="index">
        <a>
          <text>{{ item.name }}</text>
          <img :src="item.img" alt="">
        </a>
      </li>
    </ul>
  </view>
<!-- bg -->
  <view class="bg">
    <view>
      <h3>热门精选</h3>
      <v-icon icon="mdi-chevron-right"></v-icon>
    </view>

    <img src="" alt="">
  </view>
</template>

<style scoped lang="scss">
//bg
.bg{
  img{
    width: 100%;
    height: 200px;
    margin-top: 10px;
  }
  view{
    h3{
      font-size: 20px;
      font-weight: 500;
    }
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  width: 95%;
  margin: 10px auto;
}
//快捷方式4
.kj4{
  ul{
    li{
      a{
        img{
          width: 70%;
          height: 45px;
        }
        text{
          font-size: 18px;
        }
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      width: 90px;
      height: 90px;
      border: 2px solid #E2E2E2;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-template-rows: (2,100px);
    grid-gap: 10px;
  }
  width: 100%;
  margin-top: 10px;
}
//快捷方式3
.kj3{
  ul{
    li:nth-child(2){
      background: #ECD6AD;
    }
    li{
      a{
        text{
          font-size: 15px;
        }
        view{
          h4{
            font-size: 18px;
          }
          display: flex;
          align-items: center;
        }
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin-left: 12px;
      }
      display: flex;
      align-items: center;
      background: #9AE5E0;
      height: 70px;
    }
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-template-rows: (1,100px);
    grid-gap: 10px;
  }
  width: 100%;
  margin-top: 10px;
}
//快捷方式2
.kj2{
  ul{
    li{
      a{
        img{
          width: 70px;
          height: 70px;
          border-radius: 100%;
        }
        text{
          margin-top: 5px;
          font-size: 18px;
        }
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      display: flex;
      align-items: center;
      justify-content: center;
    }
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-template-rows: (1,100px);
    grid-gap: 10px;
  }
  width: 100%;
  margin-top: 10px;
}
//快捷方式1
.kj1{
  ul{
    li{
        a{
          img{
            width: 100%;
            height: 80px;
          }
          text{
            font-size: 18px;
          }
          display: flex;
          flex-direction: column;
          align-items: center;
        }
      width: 90px;
      height: 150px;
      background: #E5F8F2;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-template-rows: (1,100px);
    grid-gap: 10px;
  }
  width: 100%;
  margin-top: 10px;
}
//标题
.titli {
  h3 {
    color: #000000;
    text-align: center;
  }
  .icon {
    position: absolute; /* 将 icon 脱离文档流 */
    left: 10px;
    font-size: 30px;
  }
  position: relative; /* 父容器设置为相对定位 */
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  width: 100%;
  height: 8vh;
  background: #ffffff;
}
body{
  display: flow-root;
}
* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}
.w{
  width: 95%;
  margin: 0 auto;
}
</style>